<template>
  <div>
    <!-- 要打印的区域 -->
    <div id="printMe">
      <div class="container">
        <el-form
          ref="form"
          :inline="true"
          :model="pageGrid"
          style="border-bottom: 0px"
        >
          <el-form-item>
            <el-input v-model="pageGrid.account" placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="pageGrid.searchValue"
              placeholder="联系人姓名/电话"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="userPageList">查询</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
        <el-button
          class="mb_15"
          type="primary"
          icon="el-icon-plus"
          @click="isShowDialog = true"
          >新增</el-button
        >
        <el-table
          v-loading="isLoading"
          sortable="custom"
          :data="tableData"
          border
          class="table"
          ref="multipleTable"
        >
          <el-table-column
            type="index"
            align="center"
            label="序号"
          ></el-table-column>
          <el-table-column
            prop="account"
            align="center"
            :show-overflow-tooltip="true"
            label="账号"
          ></el-table-column>
          <el-table-column
            prop="role"
            align="center"
            :show-overflow-tooltip="true"
            label="角色"
          ></el-table-column>
          <el-table-column
            prop="name"
            align="center"
            :show-overflow-tooltip="true"
            label="联系人姓名"
          ></el-table-column>
          <el-table-column
            prop="mobile"
            align="center"
            :show-overflow-tooltip="true"
            label="联系人手机号"
          ></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="editUser(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                type="text"
                @click="deleteAccount(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageGrid.pageNo"
            :page-sizes="pageSizeArr"
            :page-size="pageGrid.pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>

        <!--新增用户-->
        <el-dialog
          :close-on-click-modal="false"
          title="账号管理"
          :visible.sync="isShowDialog"
          width="700px"
        >
          <el-form
            :model="addInfo"
            :rules="rules"
            ref="addInfo"
            :inline="true"
            label-width="100px"
          >
            <el-form-item prop="account" label="账号名" class="p_r">
              <el-input
                v-model="addInfo.account"
                placeholder="必填，最多20个字"
                maxLength="20"
              ></el-input>
            </el-form-item>
            <el-form-item prop="name" label="姓名">
              <el-input
                v-model="addInfo.name"
                placeholder="必填，最多10个字"
                maxLength="10"
              ></el-input>
            </el-form-item>
            <el-form-item prop="mobile" label="手机号">
              <el-input
                v-model="addInfo.mobile"
                autocomplete="off"
                placeholder="11个数字"
                maxLength="11"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="password"
              label="密码"
              class="p_r"
              v-if="!isEdit"
            >
              <el-input
                v-model="addInfo.password"
                autocomplete="off"
                placeholder="必填，最多30个字"
                maxLength="30"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item prop="role" label="角色">
              <el-select v-model="addInfo.role">
                <el-option
                  v-for="item in roleSelect"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <div class="login-btn t_r">
              <el-button @click="isShowDialog = false">取消</el-button>
              <el-button type="primary" @click="submitForm('addInfo')"
                >保存</el-button
              >
            </div>
          </el-form>
        </el-dialog>
      </div>
    </div>
    <!-- 打印的按钮，显示打印预览 -->
    <div class="mt-20">
      <el-button v-print="'#printMe'" type="primary">打印</el-button>
    </div>
  </div>
</template>

<script>
import commonInfo from "../../utils/common";
export default {
  data() {
    return {
      pageSizeArr: commonInfo.pageSizeArr,
      rules: {
        account: [{ required: true, message: " ", trigger: "blur" }],
        password: [{ required: true, message: " ", trigger: "blur" }],
        name: [{ required: true, message: " ", trigger: "blur" }],
        mobile: [
          { validator: this.validateNumber, trigger: "change" },
          { required: true, message: " ", trigger: "blur" },
        ],
        role: [{ required: true, message: " ", trigger: "change" }],
      },
      isShowDialog: false,
      isLoading: false,
      roleSelect: [],
      tableData: [],
      total: 0,
      pageGrid: {
        pageNo: 1,
        pageSize: 10,
        account: null,
        searchValue: null,
      },
      addInfo: {
        account: "",
        password: "",
        mobile: "",
        name: "",
        role: "",
      },
      isClick: true,
      isEdit: false,
    };
  },
  methods:{
      validateNumber(even, data, callback){
        var re = /^1[3456789]\d{9}$/;
        if (!re.test(data)) {
            callback(new Error('请输入电话号码!'));
        }else{
            callback();
        }
      },
      //编辑
      editUser(index,row){
        this.isShowDialog = true;
        this.isEdit = true;
        this.addInfo = row;
      },
      //新增弹窗清空
      delAddInfo(){
        this.addInfo = {
          account:'',
          password:'',
          mobile:'',
          name:'',
          role:'',
        }
      },
      delSuccessSave(res){
        this.isClick = true;
        if(res.code == 200){
          this.$message.success('保存成功！');
          this.delAddInfo();
          this.userPageList();
          this.isShowDialog = false;
        }
      },
      deleteAccount(index, row) {
        this.$confirm("确认删除？")
          .then((_) => {
            api.deleteAccount({ account: row.account }).then((res) => {
              if (res.code == 200) {
                this.$message.success('删除成功！');
                this.pageGrid.pageNo = 1;
                this.userPageList();
              } else {
                this.$message.error(res.msg);
              }
            });
          })
          .catch((_) => {});
      },
      //新增编辑
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let send = JSON.parse(JSON.stringify(this.addInfo));
            if(!this.isClick) return;
            this.isClick = false;
            if(send.id){
              api.updateUser(send).then((res) => {
                this.delSuccessSave(res)
              },error => {
                this.isClick = true;
              })
            }else{
              api.createUser(send).then((res) => {
                this.delSuccessSave(res)
              },error => {
                this.isClick = true;
              });
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //重置搜索条件
      resetSearch(){
        this.pageGrid = {
          pageSize: 10,
          pageNo: 1,
          account:'',
          searchValue:''
        }
      },
      //获取所有角色下拉
      getRoleList(){
        api.getRoleList().then((res) => {
          if(res.code === 200){
            this.roleSelect = res.data;
          }else{
            this.$message.error(res.msg);
          }
        })
      },
      //获取所有用户
      userPageList(){
        this.pageGrid.account = this.pageGrid.account ? this.pageGrid.account : null;
        this.pageGrid.searchValue = this.pageGrid.searchValue ? this.pageGrid.searchValue : null;
        this.isLoading = true;
        api.userPageList(this.pageGrid).then((res) => {
          if(res.code === 200){
            this.tableData = res.totalElement;
            this.total = res.total;
          }else{
            this.$message.error(res.msg);
          }
          this.isLoading = false;
        })
      },

      //分页
      handleCurrentChange(val){
        this.pageGrid.pageNo = val;
        this.userPageList();
      },
      //分页
      handleSizeChange(val){
        this.pageGrid.pageSize = val;
        this.userPageList();
      },
    }
};
</script>

<style scoped lang="less">
.border_out {
  box-shadow: 0 0 2px 2px #e4e4e4;
  box-sizing: border-box;
  padding: 10px;
  table {
    table-layout: fixed;
    border: none;
    width: 100%;
    td {
      line-height: 30px;
    }
  }
}
.detail_title {
  font-size: 16px;
  margin-bottom: 15px;
}
.el-form--inline {
  border-bottom: 1px solid #e4e4e4;
  padding-bottom: 10px;
  .el-input,
  .el-select {
    width: 200px;
  }
}
.tips {
  color: red;
  font-size: 12px;
  width: 100%;
  display: inline-block;
  line-height: 1;
  top: 35px;
  left: 0;
}
.form_title {
  font-size: 16px;
  color: #20a0ff;
  padding-left: 20px;
  margin-bottom: 15px;
  &.role {
    margin-top: 30px;
  }
}
.mt-20 {
  margin-top: 20px;
}
</style>
